<template>
	<div class="bgcolor">
		<div class="wrap">
			<nut-form :model-value="formData" ref="ruleForm" :rules="rules">
				<nut-form-item label="物流单号" prop="express_num">
					<nut-input
						class="nut-input-text"
						v-model="formData.express_num"
						placeholder="请输入快递单号"
					/>
				</nut-form-item>
				<nut-form-item label="物流公司" prop="express_company">
					<nut-input
						class="nut-input-text"
						v-model="formData.express_company"
						placeholder="请输入快递公司"
						type="text"
					/>
				</nut-form-item>
			</nut-form>
			<div class="btn">
				<nut-button
					type="primary"
					block
					color="linear-gradient(to right, #3EBD33, #9FDF4F)"
					@click="submit"
					>保存</nut-button
				>
			</div>
		</div>
		<!--  -->
		<!--  -->
	</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import useLogistic from '@/composable/logistic/useLogistic'
const { formData, submit, ruleForm, rules } = useLogistic()
</script>
<style lang="scss" scoped>
.bgcolor {
	position: relative;
	background: #eee;
	height: 100%;
}
.wrap {
	position: absolute;
	top: 20px;
	bottom: 0;
	width: 100%;
	background: #fff;
}
.btn {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	margin: 0 auto;
}
</style>
